<script setup lang="ts">
import { useRouter } from 'vue-router';
import { getInstitution } from '@/api/institution';
import { useDict } from '@/hooks/dict';
import type { Institution } from '@/types/institution'
import { Picture as IconPicture } from '@element-plus/icons-vue'
import { useImage } from '@/utils/Img';
const { baseImg } = useImage();
import { usePaging } from '@/hooks/pagination';
import { getRegionById } from '@/api/dict';
const { loadData, queryParams, setQueryParms, total } = usePaging();
setQueryParms({
  nationalCode: "",
  orgType: "",
  name: '',
  isActive: "",
  isHot: ''
})
const { organizationType: organizationType } = useDict("organizationType")

const router = useRouter();

const institutionList = ref<Institution[]>([])
const serverAreaList = ref([])
onMounted(() => {

  getData()
  getRegionById('1288747992316125187').then(res => {
    serverAreaList.value = res.data
  })
})
function getData() {
  loadData(getInstitution).then(res => {
    institutionList.value = res.rows
  })
}
function handleDetail(id: string) {
  router.push({ path: `/financial-institution/${id}` });
}
defineOptions({
  name: 'institutionView'
});

const sortOptions = ref([{
  title: "综合排序"
}, {
  title: "按热度",
  isHot: "1"
}, {
  title: "按活跃度",
  isActive: "1"
}])
const sortIndex = ref(0)
watch(sortIndex, (v: number) => {
  queryParams.isHot = ''
  queryParams.isActive = ''

  if (v === 1) {
    queryParams.isHot = '1'
  }
  if (v === 2) {
    queryParams.isActive = '1'
  }

  getData()
})
</script>
<template>
  <div class="h-main pt-7" style="background-color: #F7F8FC;">
    <div class="w-1200 m-auto ">
      <ul class="market-header-ul mt-5.2">
        <li class="py-2.5 leading-5.5 flex items-center">
          <span class="text-3.5 col3 whitespace-nowrap">机构名称：</span>
          <div class="flex gap-2 items-center">
            <el-input v-model="queryParams.orgName" clearable  @keydown.enter="getData" placeholder="请输入机构名称" style="width: 300px;"></el-input>
            <img src="@/assets/images/icon/search.png" @click="getData"
              style="width: 20px;height: 20px; margin-left: 10px; cursor: pointer;">
          </div>
        </li>
        <li class="py-2.5 leading-5.5 flex items-center">
          <span class="text-3.5 translate-y-1.1 self-start whitespace-nowrap col3">服务地区：</span>
          <div class="inline-block">
            <div class="pos-rela">
              <el-radio-group v-model="queryParams.nationalCode" @change="getData" size="small">
                <el-radio-button label="不限" value=""></el-radio-button>
                <el-radio-button v-for="(item, index) in serverAreaList" :key="index" :label="item.regionName"
                  :value="item.regionCode" />
              </el-radio-group>
            </div>
          </div>
        </li>
        <li class="py-2.5 leading-5.5 flex items-center">
          <span class="text-3.5 translate-y-1.1 self-start whitespace-nowrap col3">机构类型：</span>
          <div class="inline-block">
            <div class="pos-rela">
              <el-radio-group v-model="queryParams.orgType" @change="getData" size="small">
                <el-radio-button label="不限" value=""></el-radio-button>
                <el-radio-button v-for="(item, index) in organizationType" :key="index" :label="item.label"
                  :value="item.value" />
              </el-radio-group>
            </div>
          </div>
        </li>
      </ul>
      <p class="col9 text-3.25">
        搜索到<span class="color-red ml-1 mr-1"> {{ total }} </span>个结果
      </p>


      <div>
        <ul class="flex text-4 items-center mt-5 gap-5">
          <li class="fl cursor-pointer" v-for="(item, i) in sortOptions" :key="i" @click="sortIndex = i"
            :class="{ 'text-[#0051ff]': sortIndex === i }">
            {{ item.title }}
          </li>
        </ul>

        <div class="market-content-content flex flex-wrap mt-10 gap-10">
          <div class="list-box" v-for="(item, index) in institutionList" :key="index" @click="handleDetail(item.id)">
            <div class="list-box-top">
              <!-- <img class="inline-block" :src="item.logo" alt=""> -->
              <el-image class="inline-block w-30 max-h-15" :src="baseImg(item.logo)">
                <template #error>
                  <div class="image-slot col9">
                    <icon-picture class="w-30 max-h-15" />
                  </div>
                </template>
              </el-image>
            </div>
            <div class="list-box-center">
              <p>{{ item.orgName }}</p>
            </div>
            <div class="list-box-bottom flex justify-between">
              <div class="bottom-left fl"><span class="num">{{ item.productTotal || 0 }}个</span> <span
                  class="porduct">发布产品</span>
              </div>
              <div class="bottom-left fl"><span class="num">{{ item.dockingTotal || 0 }}个</span> <span
                  class="porduct">成功对接</span>
              </div>
            </div>
          </div>
        </div>

        <div class="mt-15 mb-20 flex justify-center">
          <el-pagination background layout="prev, pager, next" v-model:current-page="queryParams.pageNum"
            @change="getData" v-model:page-size="queryParams.pageSize" :total="total" />
        </div>
      </div>
    </div>

  </div>
</template>
<style lang="scss" scoped>
:deep(.el-radio-button__inner) {
  border: 0 !important;
  background-color: transparent;
  border-radius: 3px !important;
  border-left: 0;
  color: #333;
}

.market-content-content {
  .list-box {
    width: 360px;
    background-color: #fff;
    -webkit-box-shadow: 0 0 10px 0 rgba(57, 120, 203, .1);
    box-shadow: 0 0 10px 0 rgba(57, 120, 203, .1);
    // margin: ;
    padding-bottom: 16px;
    cursor: pointer;
    padding-top: 1px;

    .list-box-center p {
      font-size: 16px;
      color: #282b45;
      text-align: center;
      margin-bottom: 16px;
      word-break: break-word;
      padding: 0 27px;
    }

    .bottom-left {
      width: 134px;
      height: 78px;
      border-radius: 6px;
      border: 1px solid #e0e9ff;
      text-align: center;
      margin: 0 auto;

      .num {
        font-size: 22px;
        color: #f36f13;
        display: block;
        padding: 13px 0 5px;
      }

      .porduct {
        font-size: 16px;
        color: #666;
      }
    }

    .list-box-top {
      height: 50px;
      margin: 22px auto 15px;
      text-align: center;

      img {
        height: 65%;
      }
    }
  }
}

:deep(.el-input__wrapper) {
  // padding: 0;
  border: 1px solid #2d6ffd;
  padding-left: 0;

}

:deep(.el-input__wrapper.is-focus) {
  box-shadow: 0 0 0 1px var(--el-input-hover-border-color) inset !important;
}

:deep(.el-input__inner) {
  background-color: transparent;
  background-image: none;
  border-radius: 4px;
  // border: 1px solid #2d6ffd;
  box-sizing: border-box;
  color: #606266;
  display: inline-block;
  font-size: inherit;
  height: 40px;
  line-height: 40px;
  outline: 0;
  padding: 0 15px;
  transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
  width: 100%;
}
</style>
